<template>
    <view style="background-color: #FFFDE8;">
        <view class="bgimg"></view>
        <view :style="{'width':'100%','height':height}" class="liuhai"></view>
        <view class="appbar" :style="{'top':height}">
        	<view class="lefticon" @tap="goback"></view>
        	<span>提现记录</span>
        </view>
        <view :style="{'width':'100%','height':height}"></view>
        <view style="width: 100%;height: 110rpx;"></view>

        <unicloud-db
					v-if="uid"
					ref="udb"
					v-slot:default="{ data, loading, error, options }"
					orderby="createtime desc"
					collection="withdrawrecord_log"
					:where="`uid=='${uid}'`"
					@load="loadData"
        >
					<view>
						<view class="tixianbox" v-for="(item, index) in data" :key="index" v-if="data.length != 0">
								<view class="title" v-if="item.index==1">新手专享提现</view>
								<view class="title" v-if="item.index==2">幸运提现</view>
								<view class="money">
										<view class="left">{{ getmsg(item.status) }}  <span v-if="item.msg!='' && item.status == 2">({{item.msg}})</span></view>
										<view class="left" style="text-align: right;color: #FF5600;width: 20%;">{{ item.count }}元</view>
								</view>
								<view>
									<view class="title" style="color: #4D69BF;">{{ item.createtime | timeStamp }}</view>
									<view v-if="item.status === 3" class="title" style="color: #4D69BF;">实际到账金额（已扣除手续费：{{item.commission}}）：{{ item.realamount}} 元</view>
								</view>
								<button v-if="item.status === 1 && item.type == 'weixin'" @click="handlePayment(item)">确认收款</button>
						</view>
						<view class="wuxiaoxi" v-if="data.length == 0">
								<text class="wenzi">暂无数据</text>
						</view>
					</view>
        </unicloud-db>
    </view>
</template>

<script>
export default {
    data() {
			return {
				height:0,
				uid:null,
				token:'',
				data:[],
				// 微信收款参数
				options:{
					mchId: "",
					appId: "",
					package: "",
					openId: "",
				},
				// 订单号
				outTradeNo:''
			};
    },
    onLoad() {
			var self = this;
			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: (sysinfo) => {
					// console.log('返回值为系统信息',sysinfo)
					self.height = sysinfo.statusBarHeight + 'px'
				},
				complete: () => {}
			});
			uni.getStorage({
				key: 'uni_id_token',
				success: function(res) {
					// console.log(res.data);
					self.token = res.data
				}
			});
			uni.getStorage({
				key: 'uid',
				success: function(res) {
					// console.log(res.data);
					self.uid = res.data
				}
			});
			
    },
    filters: {
			timeStamp: function(value) {
				//具体到时分秒
				if (!value) return '';
				value = value * 1000;
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2);
				var sdate = ('0' + date.getDate()).slice(-2);
				var hour = ('0' + date.getHours()).slice(-2);
				var minute = ('0' + date.getMinutes()).slice(-2);
				var second = ('0' + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second;
				// 返回
				return result;
			}
    },
    methods: {
			loadData(data) {
				console.log('data: ',data);
				this.data = data
			},
			// 用户确认收款，开始转账
			async handlePayment(item){
				console.log('item: ',item);
				// 微信转账
				uniCloud.callFunction({
					name: 'hallctrlsong',
					data: {
						action: "hall/wxTransfer",
						data: {
							uid: this.uid,
							uniIdToken: this.token,
							outTradeNo:item.outTradeNo
						}
					}
				}).then((res) => {
					console.log("res:-----handlePayment ",res);
					if(res.result.errcode === 0 && res.result.wxState === 'WAIT_USER_CONFIRM'){
						this.options = res.result.options
						this.outTradeNo = res.result.outTradeNo
						this.wxReceivePayment(item._id,res.result.status)
					}else{
						// 提示错误信息
						uni.showToast({
							title: res.result.message || '转账失败',
							icon: 'none'
						});
					}
				}).catch((err) => {
					console.log('err',err)
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			// 用户微信收款
			wxReceivePayment(id,status){
				uni.showModal({
					title: '你有待确认的收款',
					content: '请及时收款，24小时内不领取将过期关闭！',
					confirmText:'去收款',
					showCancel:false, // 不显示取消按钮
					success: (res) => {
						if (res.confirm) {
							uni.requestMerchantTransfer({
								...this.options, // 变量 options 就是 上面接口的返回值中的 options 参数
								success: (res) => { 
									console.log('res: ',res);
									// 通过 _id 找到对应的记录并更新
									const index = this.data.findIndex(i => i._id === id)
									if (index !== -1) {
										this.data[index].status = status
										this.getmsg(status)
									}
									// {"errMsg": "确认收款"}
								},
								fail: (err) => {
									console.log('err: ',err);
									// 确认收款失败
								}
							});
						} else if (res.cancel) {
							console.log('用户取消收款');
						}
					}
				})
			},
			// 更新提现状态
			// async updateWithdrawStatus(statusText,item) {
			// 	uniCloud.callFunction({
			// 		name: 'hallctrlsong',
			// 		data: {
			// 			action: "hall/withdrawStatus",
			// 			data: {
			// 				uid: this.uid,
			// 				uniIdToken: this.token,
			// 				statusText:statusText,
			// 				outTradeNo:this.outTradeNo
			// 			}
			// 		}
			// 	}).then((res) => {
			// 		console.log("res:updateWithdrawStatus ",res);
			// 		if(res.result.errCode === 0){
			// 			// 通过 _id 找到对应的记录并更新
			// 			const index = this.data.findIndex(i => i._id === item._id)
			// 			if (index !== -1) {
			// 				this.data[index].status = res.result.status
			// 				this.getmsg(res.result.status)
			// 			}
			// 		}
			// 	}).catch((err) => {
			// 		console.log('err',err)
			// 	})
			// },
			goback() {
					uni.navigateBack();
			},
			getmsg(type){
				if(type == 0){
					return '提现审核中'
				}else if(type == 1){
					return '提现待确认'
				}else if(type == 2){
					return '提现拒绝'
				}else if(type == 3){
					return '打款已完成'
				}else if(type == 4){
					return '提现失败'
				}else{
					return '提现已取消'
				}
			}
    }
};
</script>

<style>
* {
    font-family: 'font-test' !important;
}
.bgimg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -3;
    background-color: #fffde8;
}
.liuhai {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #5f7ff5;
}
.appbar {
    width: 100%;
    height: 90rpx;
    position: fixed;
    left: 0;
    background-color: #5f7ff5;
    line-height: 90rpx;
    text-align: center;
    font-size: 35rpx;
    color: #ffffff;
    z-index: 999;
}

.appbar .lefticon {
    width: 57rpx;
    height: 58rpx;
    background-image: url(../../static/imags/set/fh.png);
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30rpx;
    margin: auto;
}

.tixianbox {
		/* #ifdef MP-WEIXIN */
		width: 670rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		width: 720rpx;
		/* #endif */
    height: auto;
    background-color: #d7e1ff;
    border: 2px solid #435ba2;
    margin: 0 auto;
    padding: 30rpx 25rpx 37rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}
.tixianbox .tishi {
    color: #4d69bf;
    font-weight: bold;
    font-size: 35rpx;
}
.tixianbox .money {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.tixianbox .money .left {
    float: left;
    width: 80%;
    line-height: 80rpx;
    font-weight: bold;
    font-size: 35rpx;
    color: #24325a;
}
.wuxiaoxi{
	display: flex;
	justify-content: center;
}
.wenzi{
	font-size:30rpx;
	line-height:60px;
	color: #666666;
}
</style>
